﻿<!doctype html>
<!-- saved from url=(0010)about:tabs -->
<html><head>
<meta charset="utf-8" />
<title>Edit test</title>
<style>
html{font-size:85%;border:none}
body,input,select,button{font:100% "segoe ui",arial,sans-serif}
textarea,pre{font:13px/2em consolas,"courier new",monospace;white-space:pre-wrap}
.container{border:1px solid #26a;padding:5px;overflow:auto}
.editbox{position:relative;float:left;min-width:100%}
.editor{min-height:300px;margin:0}
.editing{width:100%;height:100%;top:0;left:0;color:rgba(0,0,0,0);background:rgba(0,0,0,0);
border:none;position:absolute;margin 0;padding:0;resize:none;overflow:hidden}
.editing:-ms-input-placeholder{color:#ccc}
.editing::selection{background:rgba(60,120,180,.25)}
.editing::-moz-selection{background:rgba(60,120,180,.25)}
.editor .k{color:#00f}
.editor .c{color:#008000}
.editor .s{color:#a00000}
</style>
<script src="jquery-1.8.0.min.js"></script>
<script src="syntaxhl.js"></script>
<script>
if(window.$){
$(function(){
 var ru=[],cur=-1;

 $("#editing").on("keyup click focus blur",function(e){
  $("#rich").syntaxHighlightFrom($(this).val());
  $(this).trigger("scroll");
 }).scroll(function(){
  $("#rich")[0].scrollTop=$(this)[0].scrollTop;
 }).keydown(function(e){
  var kc=e.keyCode;
  switch(kc){
   case 9:return false;
   case 13:case 32:case 46:ru[++cur]=$(this).val();break;
   case 89:if(e.ctrlKey&&ru.length&&cur<ru.length-1){$("#editing").val(ru[++cur]);return false};break;
   case 90:if(e.ctrlKey&&cur>-1){
     if(cur==ru.length-1){
      ru[cur]=$(this).val();
     }
     $(this).val(ru[--cur]);
     return false;
    }
  }
 }).trigger("click");
});
}
</script>
</head><body>
<div class="container">
<div class="editbox">
<pre id="rich" class="editor">
</pre>
<textarea class="editing" id="editing" placeholder="hi there."></textarea>
</div></div>
</body></html>